import React, { Component } from 'react';
import HigheLevelComponent from './highLevelComponent';

// 以下是自定义组件示例
class Page5 extends Component {
    state = {
        className: 'big-chart'
    }
    changeSize(){
        this.setState({
            className: "small-chart"
        })
    }
    clickCharts(e){
        console.log("高阶组件调用时，事件作为参数，取值事件对象e:",e);
    }
    render() {
        return (
            <div className="">
                <p>page5,高阶组件封装基础组件: <button onClick={()=>this.changeSize()}>切换大小</button></p>
            
                <HigheLevelComponent 
                    className={this.state.className} 
                    props={{
                        "onClick": (e)=>this.clickCharts(e)
                    }}
                />
            </div>
        );
    }
}

export default Page5;